<script>
export default {
  name: "ta-avatar",
  render(clearElement) {
    // 默认大小
    let defaultSize = 60;
    // 默认头像
    let defaultAvatar =
      "https://img1.baidu.com/it/u=1386733571,1401918422&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";

    // 形状
    let shape = this.shape ?? "circle";

    // 默认大小类名
    let defaultSizeClassName = "overall-avatar-default-size";

    // 圆形类名
    let circleClassName = "overall-avatar-shape-circle";
    // 正方形类名
    let squareClassName = "overall-avatar-shape-square";

    // 图片地址
    let src = this.src ?? defaultAvatar;

    let avatarClass = ["overall-relative"];
    let avatarStyle = {};

    if (shape == "circle") {
      avatarClass.push(circleClassName);
    } else if (shape == "square") {
      avatarClass.push(squareClassName);
    } else {
      avatarClass.push(squareClassName);
    }

    let size = this.size;

    if (size == defaultSize || size == defaultSize + "px") {
      avatarClass.push(defaultSizeClassName);
    } else {
      avatarStyle.width = size + "px";
      avatarStyle.height = size + "px";
    }

    let editDivDom = null;

    let floatClassName = "overall-avatar-edit-float";

    let popupClassName = "overall-avatar-edit-popup";

    let position = this.position;

    let positionClass = null;

    switch (position) {
      case 0: // 0 上左
        positionClass = "overall-avatar-position-left-top";
        break;
      case 1: // 1 上右
        positionClass = "overall-avatar-position-right-top";
        break;
      case 2: // 2 下左
        positionClass = "overall-avatar-position-left-bottom";
        break;
      case 3: // 3 下右
        positionClass = "overall-avatar-position-right-bottom";
        break;
    }

    if (this.edit) {
      let editDivClass = [
        positionClass,
        "overall-absolute",
        "overall-flex",
        "overall-justify-center",
        "overall-align-center",
        "overall-border-radius-50",
      ];
      if (this.editType == "float") {
        editDivClass.push(floatClassName);
      } else if (this.editType == "popup") {
        editDivClass.push(popupClassName);
      }

      let icon = this.icon ||  "icon-yunshangchuan_o"; // icon-bianji

      let iconDom = clearElement("i", {
        class: [icon, "overall-icon overall-avatar-icon"],
      });

      editDivDom = clearElement(
        "div",
        {
          class: [floatClassName, ...editDivClass],
        },
        [iconDom]
      );
    }
    return clearElement(
      "div",
      {
        class: avatarClass,
        on: {
          click: (e) => {
            this.$emit("click", e);
          },
        },
        style: avatarStyle,
      },
      [
        clearElement("img", {
          attrs: { src },
          class: ["overall-avatar-img"],
        }),
        editDivDom,
      ]
    );
  },
  props: {
    icon: {
      type: String,
      default: null,
    },
    size: {
      type: Number,
      default: 80,
    },
    src: {
      type: String,
      default: "",
    },
    hoverEdit: {
      type: Boolean,
      default: false,
    },
    editStyle: {
      type: String,
      default: "popup", // float 悬浮   popup遮盖
    },
    position: {
      type: Number, // 0上左  1上右   2下左  3下右
      default: 3,
    },
    shape: {
      // 形状
      type: String,
      default: "circle", // circle 圆形   square 正方形
    },
    edit: {
      type: Boolean,
      default: false,
    },
    editType: {
      // float 悬浮   popup遮盖
      type: String,
      default: "float",
    },
  },
};
</script>

<style scoped lang="scss">
.overall-avatar {
  &-default-size {
    width: 60px;
    height: 60px;
  }

  &:hover &-edit-popup {
    opacity: 1;
  }

  &-position {
    &-right-bottom {
      right: -3px;
      bottom: -3px;
    }
    &-right-top {
      right: 0px;
      top: 0px;
    }
    &-left-top {
      left: 0px;
      top: 0px;
    }
    &-left-bottom {
      left: 0px;
      bottom: 0px;
    }
  }

  &-icon {
    font-size: 1.4rem;
  }

  &-img {
    width: 100%;
    height: 100%;
    background: gray;
  }

  &-shape-circle {
    border-radius: 50%;
    & img {
      border-radius: 50%;
    }
  }

  &-shape-square {
    border-radius:8px;
    & img {
      border-radius:8px;
    }
  }
  &-edit-float {
    width: 30px;
    height: 30px;
    background: rgb(49, 193, 68);
    color: white;
    border: 3px solid white;
  }
  &-edit-popup {
    opacity: 0;
    width: 100%;
    height: 100%;
    background: rgba(37, 29, 29, 0.61);
    color: white;
    font-size: 0px;
    transition: 300ms, 110ms font-size, opacity linear;
  }
}
</style>
